<template>
  <div style="margin-top: 50px">

  <a-button type="primary" @click="showModal ">新增</a-button>

  <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" style="text-align: center;width: 80%;">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'tags'">
        <a-space>
          <a-button type="primary" @click="showModal1(record)">修改</a-button>
<!--          <a-button type="primary">删除</a-button>-->
        </a-space>
      </template>
    </template>
  </a-table>
  </div>
<!--弹出窗更新数据-->
  <template>
    <div>
      <a-modal v-model:open="open1" title="更新书籍信息" @ok="handleOk1">
        <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
          <a-form-item
              label="书名"
              name="title"
          >
            <a-input v-model:value="formState.title" />
          </a-form-item>

          <a-form-item
              label="作者"
              name="author"
          >
            <a-input v-model:value="formState.author" />
          </a-form-item>

          <a-form-item
              label="日期"
              name="publication_date"
          >
            <a-input v-model:value="formState.publication_date" />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<!--            <a-button type="primary" html-type="submit">提交</a-button>-->
          </a-form-item>
        </a-form>
      </a-modal>

    </div>
  </template>
<!--  弹出框上传文件-->
  <template>
    <div>
      <a-button type="primary" @click="showModal">Open Modal</a-button>
      <a-modal v-model:open="open" title="上传文件" @ok="handleOk">
          <a-upload-dragger
              v-model:fileList="fileList"
              name="file"
              :multiple="true"
              action="http://127.0.0.1:8000/books/upload/"
              @change="handleChange"
              @drop="handleDrop"

          >
            <p class="ant-upload-drag-icon">
              <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">请上传csv或xlsx文件</p>
            <p class="ant-upload-hint">
              Support for a single or bulk upload. Strictly prohibit from uploading company data or other
              band files
            </p>
          </a-upload-dragger>

      </a-modal>
    </div>
  </template>
</template>
<script setup>
import {computed, onMounted, reactive, ref, unref} from 'vue';
import {Table} from 'ant-design-vue';
import axios from "axios";
import { message } from 'ant-design-vue';
const fileList = reactive([{
  name:''
}]);
const formState = reactive({
  title: '',
  author: '',
  publication_date:''
});
const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
// 上传文件
function handleDrop(e) {
  console.log(e);
}
// 弹出框
const open = ref(false);
const open1 = ref(false);
const showModal = id => {
  open.value = true;
};
const showModal1 = record => {
  open1.value = true;
  bookId.value=record.key
  // console.log('bookId',bookId.value);
};
const handleOk = e => {
  open.value = false;
  window.location.reload();
};
const handleOk1 = e => {
  open.value = false;
  book_update();
  window.location.reload();
};
const columns = [
  {
    title: '书籍',
    dataIndex: 'title',
    key:'name',
  },
  {
    title: '作者',
    dataIndex: 'author',
    key:'name',
  },
  {
    title: '日期',
    dataIndex: 'publication_date',
    key:'name',
  },
  {
    title: '操作',
    key: 'tags',


    // width: '150px', // 设置列宽

  },
];
const data = ref([]);
// 更新数据
const bookId = ref();
const book_update =  (record) => {
  console.log('bookId---',bookId.value);
  console.log('formState',formState);
  axios.put(`http://127.0.0.1:8000/books/update/${bookId.value}/`,formState).then(response => {
    console.log('response----', response.data.data);
  })
}
const book_list =  async () => {
  axios.get('http://127.0.0.1:8000/books/list/').then(response => {
    console.log('response', response.data.data);
    response.data.data.forEach(book => {
      data.value.push({
        key: book.id,
        title: book.title,
        author: book.author,
        publication_date: book.publication_date,
      });
      // console.log('data', data);
    });
  })
}
const handleChange = info => {
  // console.log('file_list',info.fileList);
  // 循环
  info.fileList.forEach(file => {
    console.log('file_list_name', file.name);
    const book_create =  async () => {
      console.log('file_list',fileList);
      axios.post('http://127.0.0.1:8000/books/upload/',info.fileList,
          {
            headers: {
              'Content-Type': 'multipart/form-data' // 设置正确的 Content-Type
            }
          }).then(response => {
        console.log('response', response.data.data);
        book_list();
      })
    }
  });
};
const selectedRowKeys = ref([]); // Check here to configure the default column
onMounted(() => {
  book_list();
});
const onSelectChange = changableRowKeys => {
  console.log('selectedRowKeys changed: ', changableRowKeys);
  selectedRowKeys.value = changableRowKeys;
};
const rowSelection = computed(() => {
  return {
    selectedRowKeys: unref(selectedRowKeys),
    onChange: onSelectChange,
    hideDefaultSelections: true,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          selectedRowKeys.value = newSelectedRowKeys;
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          selectedRowKeys.value = newSelectedRowKeys;
        },
      },
    ],
  };
});
</script>
